<template>
  <div class="com-style-box">
    <el-form label-width="80px" size="medium" :model="styleForm">
      <el-collapse accordion v-model="activeName" style="padding: 0 16px">
        <el-collapse-item title="布局配置" name="0">
          <el-form-item label-width="0px">
            <el-button
              size="medium"
              type="primary"
              :disabled="rowData.index === 1"
              @click="$emit('moveRow', { rowData, type: 'up' })"
              >向上一行
            </el-button>
            <el-button
              size="medium"
              type="primary"
              :disabled="rowCount === rowData.index"
              @click="$emit('moveRow', { rowData, type: 'down' })"
              >向下一行
            </el-button>
          </el-form-item>
          <el-form-item label="组件高度" prop="initHeight">
            <el-input
              v-if="colData.colHeight !== undefined"
              v-model="colData.colHeight"
              @change="changeSize"
            >
            </el-input>
            <el-input v-else v-model="rowData.initHeight" @change="changeSize">
            </el-input>
          </el-form-item>
          <el-button
            size="medium"
            type="primary"
            @click="$emit('removeRow', rowData)"
            icon="el-icon-delete"
            >删除行
          </el-button>
        </el-collapse-item>
        <el-collapse-item title="数据源配置" name="1">
          <el-form-item label="刷新间隔" prop="interval">
            <el-slider
              v-model="colData.interval"
              :step="5"
              :max="90"
              @change="changeType"
            >
            </el-slider>
          </el-form-item>
          <el-tabs
            v-model="apiActiveName"
            :editable="colData.componentName !== 'title-title'"
            @tab-add="addTab"
            @tab-remove="removeTab"
            @tab-click="apiTabChange"
          >
            <el-tab-pane
              v-if="!Array.isArray(colData.api)"
              label="标签1"
              name="0"
              :tabIndex="0"
            >
              <el-row
                type="flex"
                justify="end"
                :gutter="20"
                style="margin-bottom: 10px"
              >
                <el-col :span="10">
                  <el-input
                    size="small"
                    v-model="dsName"
                    placeholder="请填写数据源名称"
                  ></el-input>
                </el-col>
                <el-col :span="4">
                  <el-button size="medium" class="btn-icon" @click="getApiList">
                    <span class="el-icon-search" />
                  </el-button>
                </el-col>
              </el-row>
              <el-table
                :border="true"
                :data="apiList"
                :row-class-name="selectRow"
                style="width: 100%"
              >
                <el-table-column
                  show-overflow-tooltip
                  prop="dsName"
                  label="数据源名称"
                  min-width="120"
                >
                </el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  prop="description"
                  label="描述"
                  min-width="150"
                >
                </el-table-column>
                <el-table-column prop="date" label="操作" min-width="80">
                  <template slot-scope="scope">
                    <span class="operation-btn" @click="selectApi(scope.row)"
                      >选择</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <template v-if="Array.isArray(colData.api)">
              <el-tab-pane
                v-for="(item, i) in colData.api"
                :key="i"
                :label="`标签${i + 1}`"
                :name="i + ''"
                :tabIndex="i"
              >
                <el-form-item
                  label="标签名称"
                  v-if="Array.isArray(colData.api) && colData.api.length > 1"
                >
                  <el-input
                    size="medium"
                    v-model="item.label"
                    @change="
                      (val) => {
                        labelChange(val, i);
                      }
                    "
                    @input="change()"
                  ></el-input>
                </el-form-item>
                <el-row
                  type="flex"
                  justify="end"
                  :gutter="20"
                  style="margin-bottom: 10px"
                >
                  <el-col :span="10">
                    <el-input
                      size="small"
                      v-model="dsName"
                      placeholder="请填写数据源名称"
                    ></el-input>
                  </el-col>
                  <el-col :span="4">
                    <el-button
                      size="medium"
                      class="btn-icon"
                      @click="getApiList"
                    >
                      <span class="el-icon-search" />
                    </el-button>
                  </el-col>
                </el-row>
                <el-table
                  :border="true"
                  :data="apiList"
                  :row-class-name="selectRow"
                  style="width: 100%"
                >
                  <el-table-column
                    show-overflow-tooltip
                    prop="dsName"
                    label="数据源名称"
                    min-width="120"
                  >
                  </el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    prop="description"
                    label="描述"
                    min-width="150"
                  >
                  </el-table-column>
                  <el-table-column prop="date" label="操作" min-width="80">
                    <template slot-scope="scope">
                      <span
                        class="operation-btn"
                        @click="selectApi(scope.row, i, item)"
                        >选择</span
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </template>
          </el-tabs>

          <el-pagination
            :current-page="pageInfo.currentPage"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.totalRecord"
            style="margin-top: 5px"
            @size-change="sizeChange"
            @current-change="currentPageChange"
          />
        </el-collapse-item>
        <el-collapse-item title="标题配置" name="2">
          <el-form-item label="主标题" prop="mainTitle">
            <el-input
              v-model="colData.mainTitle"
              @change="changeType"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="colData.componentName !== 'title-title'"
            label="副标题"
            prop="secondTitle"
          >
            <el-input
              v-model="colData.secondTitle"
              @change="changeType"
            ></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="链接配置" name="url">
          <!-- <el-form-item label="标题链接" prop="secondTitle">
            <el-cascader
              clearable
              v-model="styleForm.url"
              :options="menuData"
              @change="changeForm"
            ></el-cascader>
          </el-form-item> -->
          <el-form-item label="链接文字" prop="linkText">
            <el-input
              v-model="colData.componentData.linkText"
              placeholder="默认显示’详情‘"
              @change="changeType"
            ></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="组件样式配置" name="3">
          <div v-if="colData.componentName == 'title-title'">
            <el-form-item label="图标选择">
              <el-select
                filterable
                v-model="styleForm.icon"
                @change="changeForm"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in iconList"
                  :key="i"
                  :label="item"
                  :value="item"
                >
                  <span :class="item"></span
                  ><span style="padding-left: 15px">{{ item }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="背景图片选择">
              <el-select
                filterable
                v-model="styleForm.bgImg"
                @change="changeForm"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in bgImgList"
                  :key="i"
                  :label="item"
                  :value="item"
                >
                  <div
                    class="bgOptionBox"
                    :style="`backgroundImage:url(../../../../../static/images/reportMgr/titleBgImg/${item}.svg)`"
                  ></div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-for="(item, i) in styleForm.tooltipList"
              :label="`第${i + 1}行tip`"
            >
              <el-input
                filterable
                v-model="styleForm.tooltipList[i]"
                @change="changeForm"
                placeholder=""
              >
              </el-input>
            </el-form-item>
          </div>
          <el-tabs
            @tab-click="showCode"
            v-if="showTab"
            class="chartStyle"
            v-model="chartStyleName"
          >
            <el-tab-pane
              v-if="colData.componentName === 'chart-pie'"
              label="饼图配置"
              name="pie"
            >
              <el-form-item label="饼图类型">
                <el-select
                  filterable
                  v-model="styleForm.series[0].roseType"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in roseTypeList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="空心饼图">
                <el-switch @change="changeHollow" v-model="isHollow">
                </el-switch>
              </el-form-item>
              <el-form-item label="横坐标">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.series[0].center[0]"
                ></el-input>
              </el-form-item>
              <el-form-item label="纵坐标">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.series[0].center[1]"
                ></el-input>
              </el-form-item>
              <el-form-item label="内圈直径">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.series[0].radius[0]"
                ></el-input>
              </el-form-item>
              <el-form-item label="外圈直径">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.series[0].radius[1]"
                ></el-input>
              </el-form-item>

              <el-form-item label="引导文字">
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.series[0].label.normal.show"
                >
                </el-switch>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              v-if="colData.componentName === 'chart-funnel'"
              label="漏斗图配置"
              name="funnel"
            >
              <el-form-item label="水平对齐">
                <el-select
                  filterable
                  v-model="styleForm.series[0].funnelAlign"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in legendLeft"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="数据排序">
                <el-select
                  filterable
                  v-model="styleForm.series[0].sort"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in dataSort"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="左侧距离">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.series[0].left"
                ></el-input>
              </el-form-item>
              <el-form-item label="上侧距离">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.series[0].top"
                ></el-input>
              </el-form-item>
              <el-form-item label="图形宽度">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.series[0].width"
                ></el-input>
              </el-form-item>
              <el-form-item label="图形高度">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.series[0].height"
                ></el-input>
              </el-form-item>
              <el-form-item label="引导文字">
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.series[0].label.normal.show"
                >
                </el-switch>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              label="网格配置"
              name="first"
              v-if="
                colData.componentName !== 'chart-pie' &&
                colData.componentName !== 'chart-gauge' &&
                colData.componentName !== 'chart-radar' &&
                colData.componentName !== 'chart-funnel'
              "
            >
              <el-form-item label="左边距">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.grid.left"
                ></el-input>
              </el-form-item>
              <el-form-item label="上边距">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.grid.top"
                ></el-input>
              </el-form-item>
              <el-form-item label="右边距">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.grid.right"
                ></el-input>
              </el-form-item>
              <el-form-item label="下边距">
                <el-input
                  @change="changeForm"
                  v-model="styleForm.grid.bottom"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              name="barConfig"
              label="柱形图配置"
              v-if="colData.componentName == 'chart-bar'"
            >
              <el-form-item label="柱形方向">
                <el-switch
                  active-color="#13ce66"
                  inactive-color="#409EFF"
                  active-text="横向"
                  inactive-text="纵向"
                  active-value="row"
                  inactive-value="column"
                  @change="changeForm"
                  v-model="styleForm.barType"
                ></el-switch>
              </el-form-item>
              <el-form-item label="数据翻转">
                <el-switch @change="changeForm" v-model="styleForm.isReverse">
                </el-switch>
              </el-form-item>
              <el-form-item label="系列间隔">
                <el-input-number
                  @change="changeForm"
                  v-model="styleForm.series[0].barGap"
                  :precision="1"
                  :step="0.1"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="柱形重叠">
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.isOverlap"
                ></el-switch>
              </el-form-item>
              <template
                v-for="(labelItem, labelIndex) in styleForm.series[0].label"
              >
                <hr />
                <el-form-item :label="`系列${labelIndex + 1}`"> </el-form-item>
                <el-form-item label="显示标题">
                  <el-switch
                    @change="changeForm"
                    v-model="styleForm.series[0].label[labelIndex].normal.show"
                  ></el-switch>
                </el-form-item>
                <el-form-item label="标题位置">
                  <el-select
                    filterable
                    v-model="
                      styleForm.series[0].label[labelIndex].normal.position
                    "
                    @change="changeForm"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, i) in labelPositionList"
                      :key="i"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="标题颜色">
                  <el-popover
                    popper-class="colorBox"
                    placement="left-end"
                    trigger="click"
                    :show-arrow="false"
                  >
                    <colerPicker
                      @pushColor="changeColor"
                      v-model="
                        styleForm.series[0].label[labelIndex].normal.color
                      "
                    ></colerPicker>
                    <template v-slot:reference>
                        <el-button
                          class="colorButton"
                          :style="`backgroundColor:${styleForm.series[0].label[labelIndex].normal.color}`"
                          >点击编辑
                        </el-button>
                    </template>
                  </el-popover>
                </el-form-item>
              </template>
            </el-tab-pane>
            <el-tab-pane
              v-if="colData.componentName === 'chart-line'"
              label="曲线配置"
              name="line"
            >
              <el-form-item label="自动补点">
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.series[0].connectNulls"
                ></el-switch>
              </el-form-item>
              <el-form-item label="Y自适应">
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.yAxis[0].autoMin"
                ></el-switch>
              </el-form-item>
              <el-form-item label="曲线类型">
                <el-select
                  filterable
                  v-model="styleForm.series[0].lineType"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in lineTypeList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                v-for="(item, i) in styleForm.seriesTypeList"
                :label="`曲线${i + 1}`"
              >
                <el-switch
                  active-color="#13ce66"
                  inactive-color="#409EFF"
                  active-text="柱状图"
                  inactive-text="一般折线"
                  @change="changeForm"
                  v-model="styleForm.seriesTypeList[i]"
                ></el-switch>

                <label style="margin-left: 12px">Y</label>
                <el-select
                  v-model="styleForm.seriesYAxisIndexList[i]"
                  @change="changeYAxisIndex(i)"
                  placeholder="请选择"
                  class="y-axis-index"
                >
                  <el-option
                    v-for="(item, i) in styleForm.yAxis"
                    :key="i"
                    :label="+i + 1"
                    :value="i"
                  >
                  </el-option>
                </el-select>
                轴
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              v-if="colData.componentName === 'chart-bar'"
              label="堆叠配置"
              name="bar"
            >
              <el-form-item
                v-for="(item, i) in styleForm.seriesStackList"
                :label="`柱子${i + 1}`"
              >
                <el-input
                  @change="changeForm"
                  v-model="styleForm.seriesStackList[i]"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              v-if="colData.componentName === 'chart-sankey'"
              label="桑基图配置"
              name="sankey"
            >
              <el-form-item label="节点拖动">
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.series[0].draggable"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="悬浮隐藏">
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.series[0].focusNodeAdjacency"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="节点宽度">
                <el-input
                  @change="changeForm"
                  v-model.number="styleForm.series[0].nodeWidth"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="节点间距">
                <el-input
                  @change="changeForm"
                  v-model.number="styleForm.series[0].nodeGap"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="排列方向">
                <el-select
                  filterable
                  v-model="styleForm.series[0].orient"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in sankeyOrientList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="标题位置">
                <el-select
                  filterable
                  v-model="styleForm.series[0].label.position"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in labelPositionList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              label="图例配置"
              name="legend"
              v-if="
                colData.componentName !== 'chart-sankey' &&
                colData.componentName !== 'chart-gauge'
              "
            >
              <el-form-item label="是否显示">
                <el-switch @change="changeForm" v-model="styleForm.legend.show">
                </el-switch>
              </el-form-item>
              <el-form-item
                v-if="
                  colData.componentName === 'chart-pie' ||
                  colData.componentName === 'chart-funnel'
                "
                label="显示占比"
              >
                <el-switch @change="changeForm" v-model="styleForm.showPer">
                </el-switch>
              </el-form-item>
              <el-form-item label="显示方式">
                <el-select
                  filterable
                  v-model="styleForm.legend.orient"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in orientList"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="水平位置">
                <el-select
                  filterable
                  v-model="styleForm.legend.left"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in legendLeft"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="垂直位置">
                <el-select
                  filterable
                  v-model="styleForm.legend.top"
                  @change="changeForm"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="(item, i) in legendTop"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="图例宽度"
                v-if="colData.componentName === 'chart-funnel'"
              >
                <el-input
                  @change="changeForm"
                  v-model="styleForm.legend.width"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              label="坐标轴配置"
              name="second"
              v-if="
                colData.componentName === 'chart-line' ||
                colData.componentName === 'chart-bar' ||
                colData.componentName === 'chart-heatmap'
              "
            >
              <el-form-item label="X轴显示">
                <el-switch @change="changeForm" v-model="styleForm.xAxis.show">
                </el-switch>
              </el-form-item>
              <el-form-item label="X辅助线">
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.xAxis.axis.show"
                >
                </el-switch>
              </el-form-item>
              <el-form-item label="标签角度">
                <el-input-number
                  v-model="styleForm.xRotate"
                  @change="changeForm"
                ></el-input-number>
              </el-form-item>
              <el-form-item
                v-if="
                  colData.componentName === 'chart-line' &&
                  styleForm.seriesTypeList.length > 1
                "
                label="Y轴数量"
              >
                <el-input-number
                  v-model="yAxisLength"
                  @change="changeYAxis"
                  :min="1"
                  :max="yAxisMaxLength"
                  size="small"
                ></el-input-number>
              </el-form-item>
              <el-row v-if="Array.isArray(styleForm.yAxis)">
                <el-form-item
                  v-for="(item, i) in styleForm.yAxis"
                  :label="`Y${i + 1}轴显示`"
                  ><template v-if="yAxisLength > 1">
                    <el-switch
                      @change="changeForm"
                      v-model="styleForm.yAxis[i].show"
                    >
                    </el-switch> </template
                ></el-form-item>
                <el-form-item label="Y轴显示">
                  <el-switch v-model="yAxisShow"> </el-switch>
                </el-form-item>
              </el-row>
              <el-row v-else>
                <el-form-item label="Y轴显示">
                  <el-switch v-model="yAxisShow"> </el-switch>
                </el-form-item>
              </el-row>
              <el-form-item label="标签角度">
                <el-input-number
                  v-model="styleForm.yRotate"
                  @change="changeForm"
                ></el-input-number>
              </el-form-item>
              <el-form-item
                label="单位位置"
                v-if="colData.componentName === 'chart-line'"
              >
                <el-select filterable v-model="nameUnit" placeholder="请选择">
                  <el-option label="Y轴头部" :value="true"></el-option>
                  <el-option label="Y轴刻度" :value="false"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="单位位置"
                v-if="colData.componentName === 'chart-bar'"
              >
                <el-select
                  filterable
                  @change="changeForm"
                  v-model="styleForm.nameUnit"
                  placeholder="请选择"
                >
                  <el-option label="轴头部" :value="true"></el-option>
                  <el-option label="轴刻度" :value="false"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="刻度取整"
                v-if="
                  colData.componentName === 'chart-bar' ||
                  colData.componentName === 'chart-line'
                "
              >
                <el-switch @change="changeForm" v-model="styleForm.splitInt">
                </el-switch>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              label="颜色配置"
              name="fourth"
              v-if="colData.componentName !== 'chart-gauge'"
            >
              <el-form-item
                label="标题颜色"
                v-if="colData.componentName === 'chart-sankey'"
              >
                <el-popover
                  popper-class="colorBox"
                  placement="left-end"
                  trigger="click"
                  :show-arrow="false"
                >
                  <colerPicker
                    @pushColor="changeColor"
                    v-model="styleForm.series[0].label.color"
                  ></colerPicker>
                  <template v-slot:reference>
                      <el-button
                        class="colorButton"
                        :style="`backgroundColor:${styleForm.series[0].label.color}`"
                        >点击编辑
                      </el-button>
                  </template>
                </el-popover>
              </el-form-item>
              <el-form-item
                v-if="colData.componentName === 'chart-line'"
                label="填充色"
              >
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.series[0].areaStyle"
                >
                </el-switch>
              </el-form-item>
              <el-form-item
                v-if="colData.componentName === 'chart-bar'"
                label="渐变色"
              >
                <el-switch @change="changeForm" v-model="styleForm.gradient">
                </el-switch>
              </el-form-item>
              <el-form-item
                v-if="colData.componentName === 'chart-bar'"
                label="渐变方向"
              >
                <el-switch
                  @change="changeForm"
                  v-model="styleForm.gradientDire"
                >
                </el-switch>
              </el-form-item>
              <el-form-item
                label="同级同色"
                v-if="colData.componentName === 'chart-sankey'"
              >
                <el-switch @change="changeForm" v-model="styleForm.colorByLev">
                </el-switch>
              </el-form-item>
              <template v-if="colData.componentName === 'chart-radar'">
                <el-form-item label="文字颜色">
                  <el-popover
                    popper-class="colorBox"
                    placement="left-end"
                    trigger="click"
                    :show-arrow="false"
                  >
                    <colerPicker
                      @pushColor="changeColor"
                      v-model="styleForm.title.textColor"
                    ></colerPicker>
                    <template v-slot:reference>
                        <el-button
                          class="colorButton"
                          :style="`backgroundColor:${styleForm.title.textColor}`"
                          >点击编辑
                        </el-button>
                    </template>
                  </el-popover>
                </el-form-item>
                <el-form-item label="数值颜色">
                  <el-popover
                    popper-class="colorBox"
                    placement="left-end"
                    trigger="click"
                    :show-arrow="false"
                  >
                    <colerPicker
                      @pushColor="changeColor"
                      v-model="styleForm.title.valueColor"
                    ></colerPicker>
                    <template v-slot:reference>
                        <el-button
                          class="colorButton"
                          :style="`backgroundColor:${styleForm.title.valueColor}`"
                          >点击编辑
                        </el-button>
                    </template>
                  </el-popover>
                </el-form-item>
              </template>
              <el-form-item label="图表颜色">
                <el-popover
                  v-for="(colorItem, colorIdx) in styleForm.color"
                  :key="colorIdx"
                  popper-class="colorBox"
                  placement="left-end"
                  trigger="click"
                  :show-arrow="false"
                >
                  <colerPicker
                    @pushColor="changeColor"
                    v-model="styleForm.color[colorIdx]"
                    :key="colorIdx"
                  ></colerPicker>

                  <template v-slot:reference>
                      <el-button
                        class="colorButton"
                        :style="`backgroundColor:${colorItem};height:26px`"
                      >
                        <i
                          class="el-icon-delete del-btn colorIcon"
                          @click.stop="delColor(colorIdx)"
                        ></i>
                      </el-button>
                  </template>
                </el-popover>
              </el-form-item>
              <el-row
                style="display: flex; align-items: center"
                v-for="(colorItem, colorIdx) in colorList"
                :key="colorIdx"
              >
                <el-radio
                  size="medium"
                  v-model="radio"
                  @change="changeColorList"
                  :label="colorIdx"
                >
                  {{ "系列" + (colorIdx + 1) }}
                </el-radio>

                <el-button
                  v-for="(coItem, coIdx) in colorItem"
                  :key="coIdx"
                  style="width: 8%"
                  :style="`backgroundColor:${coItem}`"
                  @click="styleForm.color.push(coItem), changeForm()"
                >
                </el-button>
              </el-row>
            </el-tab-pane>
            <el-tab-pane
              label="仪表盘颜色"
              name="five"
              v-if="colData.componentName == 'chart-gauge'"
            >
              <el-form-item label="仪表颜色">
                <el-popover
                  v-for="(colorItem, colorIdx) in styleForm.color"
                  :key="colorIdx"
                  popper-class="colorBox"
                  placement="left-end"
                  trigger="click"
                  :show-arrow="false"
                >
                  <colerPicker
                    @pushColor="changeColor"
                    v-model="styleForm.color[colorIdx]"
                    :key="colorIdx"
                  ></colerPicker>

                  <template v-slot:reference>
                      <el-button
                        class="colorButton"
                        :style="`backgroundColor:${colorItem};height:26px`"
                      >
                        <i
                          class="el-icon-delete del-btn colorIcon"
                          @click.stop="delColor(colorIdx)"
                        ></i>
                      </el-button>
                  </template>
                </el-popover>
              </el-form-item>
              <el-row
                style="display: flex; align-items: center"
                v-for="(colorItem, colorIdx) in colorList"
                :key="colorIdx"
              >
                <el-radio
                  size="medium"
                  v-model="radio"
                  @change="changeColorList"
                  :label="colorIdx"
                >
                  {{ "系列" + (colorIdx + 1) }}
                </el-radio>

                <el-button
                  v-for="(coItem, coIdx) in colorItem"
                  :key="coIdx"
                  style="width: 8%"
                  :style="`backgroundColor:${coItem}`"
                  @click="
                    styleForm.color.push(coItem);
                    changeForm();
                  "
                >
                </el-button>
              </el-row>
            </el-tab-pane>
            <el-tab-pane
              label="仪表盘属性"
              name="six"
              v-if="colData.componentName == 'chart-gauge'"
            >
              <el-form-item label="轴线宽度">
                <el-slider
                  v-model="styleForm.series[0].axisLine.lineStyle.width"
                  :max="100"
                  @change="changeForm()"
                ></el-slider>
              </el-form-item>
              <el-form-item label="左侧距离">
                <el-slider
                  v-model="styleForm.left"
                  :max="70"
                  @change="changeForm()"
                ></el-slider>
              </el-form-item>
              <el-form-item label="标题距离">
                <el-slider
                  v-model="styleForm.offsetCenter"
                  :max="100"
                  :min="-50"
                  @change="changeForm()"
                ></el-slider>
              </el-form-item>
              <el-form-item label="标题">
                <el-switch
                  v-model="styleForm.series[0].title.show"
                  @change="changeForm()"
                ></el-switch>
              </el-form-item>
              <el-form-item label="分割线">
                <el-switch
                  v-model="styleForm.series[0].splitLine.show"
                  @change="changeForm()"
                ></el-switch>
              </el-form-item>
              <el-form-item label="刻度">
                <el-switch
                  v-model="styleForm.series[0].axisLabel.show"
                  @change="changeForm()"
                ></el-switch>
              </el-form-item>
              <el-form-item label="指针">
                <el-switch
                  v-model="styleForm.series[0].pointer.show"
                  @change="changeForm()"
                ></el-switch>
              </el-form-item>
              <el-form-item label="详情">
                <el-switch
                  v-model="styleForm.series[0].detail.show"
                  @change="changeForm()"
                ></el-switch>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              name="seven"
              label="热力图属性"
              v-if="colData.componentName == 'chart-heatmap'"
            >
              <el-form-item label="数据映射">
                <el-switch
                  v-model="styleForm.visualMap.show"
                  @change="changeForm()"
                ></el-switch>
              </el-form-item>
              <el-form-item label="高度">
                <el-slider
                  v-model="styleForm.height"
                  :max="100"
                  @change="changeForm()"
                ></el-slider>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane
              name="eight"
              label="雷达图属性"
              v-if="colData.componentName === 'chart-radar'"
            >
              <el-form-item label="半径值" label-width="100px">
                <el-slider
                  v-model="styleForm.radius"
                  :max="100"
                  @change="changeForm()"
                ></el-slider>
              </el-form-item>
              <el-form-item label="圆心距左侧" label-width="100px">
                <el-slider
                  v-model="styleForm.centerX"
                  :max="100"
                  @change="changeForm()"
                ></el-slider>
              </el-form-item>
              <el-form-item label="圆心距上侧" label-width="100px">
                <el-slider
                  v-model="styleForm.centerY"
                  :max="100"
                  @change="changeForm()"
                ></el-slider>
              </el-form-item>
              <el-form-item label="总评配置" label-width="100px">
              </el-form-item>
              <el-form-item label="总评显示" label-width="100px">
                <el-switch
                  v-model="styleForm.title.subShow"
                  @change="changeForm()"
                ></el-switch>
              </el-form-item>
              <el-form-item label="总评文字" label-width="100px">
                <el-input
                  filterable
                  v-model="styleForm.title.subText"
                  @change="changeForm"
                  placeholder=""
                >
                </el-input>
              </el-form-item>
              <el-form-item label="水平位置" label-width="100px">
                <el-input
                  filterable
                  v-model="styleForm.title.left"
                  @change="changeForm"
                  placeholder=""
                >
                </el-input>
              </el-form-item>
              <el-form-item label="垂直位置" label-width="100px">
                <el-input
                  filterable
                  v-model="styleForm.title.top"
                  @change="changeForm"
                  placeholder=""
                >
                </el-input>
              </el-form-item>
            </el-tab-pane>
            <!--<el-tab-pane name="mixin" label="自定义配置" v-if="colData.componentName.indexOf('chart')>-1">-->
            <!--<div id="container" ref="container"></div>-->
            <!--</el-tab-pane>-->
          </el-tabs>
          <div v-if="colData.componentName === 'chart-liquid'">
            <el-form-item label="标题颜色">
              <el-popover
                popper-class="colorBox"
                placement="left-end"
                trigger="click"
                :show-arrow="false"
              >
                <colerPicker
                  @pushColor="changeColor"
                  v-model="styleForm.title.textStyle.color"
                ></colerPicker>
                <template v-slot:reference>
                    <el-button
                      class="colorButton"
                      :style="`backgroundColor:${styleForm.title.textStyle.color}`"
                      >点击编辑
                    </el-button>
                </template>
              </el-popover>
            </el-form-item>
            <el-form-item label="背景颜色">
              <el-popover
                popper-class="colorBox"
                placement="left-end"
                trigger="click"
                :show-arrow="false"
              >
                <colerPicker
                  @pushColor="changeColor"
                  v-model="styleForm.series[0].itemStyle.normal.color"
                ></colerPicker>
                <template v-slot:reference>
                  <div>
                    <el-button
                      class="colorButton"
                      :style="`backgroundColor:${styleForm.series[0].itemStyle.normal.color}`"
                      >点击编辑
                    </el-button>
                  </div>
                </template>
              </el-popover>
            </el-form-item>
            <el-form-item label="形状">
              <el-select
                v-model="styleForm.series[0].shape"
                @change="changeForm"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in shapeList"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="显示轮廓">
              <el-switch
                @change="changeForm"
                v-model="styleForm.series[0].outline.show"
              >
              </el-switch>
            </el-form-item>
            <el-form-item label="动画效果">
              <el-switch
                @change="changeForm"
                v-model="styleForm.series[0].waveAnimation"
              >
              </el-switch>
            </el-form-item>
          </div>
          <div v-if="colData.componentName === 'table-table'">
            <el-collapse accordion v-model="tableIndex" :key="tableKey">
              <div
                style="display: flex"
                v-for="(tableColItem, tableColIdx) in styleForm.tableColData"
                :key="tableColIdx"
              >
                <el-collapse-item
                  :title="`第${tableColIdx + 1}列`"
                  :name="tableColIdx"
                >
                  <el-form-item label="标题">
                    <el-input
                      @change="changeForm"
                      v-model="styleForm.tableColData[tableColIdx].label"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="列宽">
                    <el-input
                      @change="changeForm"
                      v-model.number="styleForm.tableColData[tableColIdx].width"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="显示">
                    <el-switch
                      @change="changeForm"
                      v-model="styleForm.tableColData[tableColIdx].show"
                    ></el-switch>
                  </el-form-item>
                  <el-button
                    type="primary"
                    size="medium"
                    class="el-icon-arrow-left"
                    :disabled="tableColIdx === 0"
                    @click="leftCol(tableColIdx)"
                  ></el-button>
                  <el-button
                    type="primary"
                    size="medium"
                    class="el-icon-arrow-right"
                    :disabled="
                      tableColIdx === styleForm.tableColData.length - 1
                    "
                    @click="rightCol(tableColIdx)"
                  ></el-button>
                </el-collapse-item>
              </div>
            </el-collapse>
          </div>
          <div v-if="colData.componentName === 'progress-progress'">
            <el-form-item label="条文颜色">
              <el-popover
                popper-class="colorBox"
                placement="left-end"
                trigger="click"
                :show-arrow="false"
              >
                <colerPicker
                  @pushColor="changeColor"
                  v-model="styleForm.progressData.color"
                ></colerPicker>
                <template v-slot:reference>
                    <el-button
                      class="colorButton"
                      :style="`backgroundColor:${styleForm.progressData.color}`"
                      >点击编辑
                    </el-button>
                </template>
              </el-popover>
            </el-form-item>
            <el-form-item label="展示条数">
              <el-input-number
                @change="changeForm"
                :min="1"
                :max="1000"
                size="small"
                v-model="styleForm.progressData.displayNum"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="数据排序">
              <el-select
                filterable
                v-model="styleForm.progressData.sort"
                @change="changeForm"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in dataSort"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="数据格式">
              <el-select
                filterable
                v-model="styleForm.progressData.format"
                @change="changeForm"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in dataFormats"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标签宽度">
              <el-input
                @change="changeForm"
                v-model="styleForm.progressData.labelWidth"
              ></el-input>
            </el-form-item>
            <el-form-item label="条文宽度">
              <el-input
                @change="changeForm"
                v-model="styleForm.progressData.contentWidth"
              ></el-input>
            </el-form-item>
          </div>
          <div v-if="colData.componentName === 'text-description'">
            <el-form-item label="水平位置">
              <el-select
                filterable
                v-model="styleForm.textAlign"
                @change="changeForm"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, i) in legendLeft"
                  :key="i"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="首行缩进">
              <el-input-number
                v-model="styleForm.indent"
                @change="changeForm"
                :min="0"
                :max="10"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="模板字大小">
              <el-slider
                :min="12"
                :max="56"
                v-model="styleForm.fontSize"
                @change="changeForm"
              ></el-slider>
            </el-form-item>
            <el-form-item label="模板字色">
              <el-popover
                popper-class="colorBox"
                placement="left-end"
                trigger="click"
                :show-arrow="false"
              >
                <colerPicker
                  @pushColor="changeColor"
                  v-model="styleForm.color"
                ></colerPicker>
                <template v-slot:reference>
                    <el-button
                      class="colorButton"
                      :style="`backgroundColor:${styleForm.color}`"
                      >点击编辑
                    </el-button>
                </template>
              </el-popover>
            </el-form-item>
            <el-form-item label="关键字大小">
              <el-slider
                :min="12"
                :max="56"
                v-model="styleForm.keywordFontSize"
                @change="changeForm"
              ></el-slider>
            </el-form-item>
            <el-form-item label="关键字色">
              <el-popover
                popper-class="colorBox"
                placement="left-end"
                trigger="click"
                :show-arrow="false"
              >
                <colerPicker
                  @pushColor="changeColor"
                  v-model="styleForm.keywordColor"
                ></colerPicker>
                <template v-slot:reference>
                    <el-button
                      class="colorButton"
                      :style="`backgroundColor:${styleForm.keywordColor}`"
                      >点击编辑
                    </el-button>
                </template>
              </el-popover>
            </el-form-item>
            <el-form-item label="关键词距">
              <el-input-number
                v-model="styleForm.keywordPadding"
                @change="changeForm"
                :min="0"
                :max="10"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="文字模板">
              <el-input
                type="textarea"
                autosize
                :autosize="{ minRows: 4 }"
                placeholder="请输入模板内容，需要替代的内容使用“{%%}”占位符"
                v-model="styleForm.template"
                @change="changeForm"
              ></el-input>
            </el-form-item>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import nt from "../../network";
import { debounce } from "lodash";
import colerPicker from "../components/color-picker/index.vue";
import * as monaco from "monaco-editor";
// import {compTypeList} from '../data/variable'
import { alignType } from "../utils/dragReport";

export default {
  name: "editComStyle",
  components: { colerPicker },
  props: { colData: {}, rowData: {}, rowCount: {}, menuData: {} },
  data() {
    return {
      radio: 0,
      apiActiveName: '0',
      monacoEditor: null,
      tabIndex: 0,
      isHollow: true, //饼图空心
      tableIndex: 0,
      api: "",
      alignType,
      tableKey: "",
      chartStyleName: "first",
      dsName: "",
      colorDialog: false,
      showTab: false,
      colorIndex: 0,
      pageInfo: { currentPage: 1, pageSize: 10, totalRecord: 0 },
      apiList: [],
      colorList: [
        [
          "rgba(37,204,167,1)",
          "rgba(247,165,76,1)",
          "rgba(65,158,255,1)",
          "rgba(244,110,110,1)",
          "rgba(53,129,209,1)",
        ],
        [
          "rgba(25,58,99,1)",
          "rgba(249,241,205,1)",
          "rgba(239,211,112,1)",
          "rgba(227,153,90,1)",
          "rgba(231,99,69,1)",
        ],
        [
          "rgba(230,102,44,1)",
          "rgba(249,214,73,1)",
          "rgba(218,218,218,1)",
          "rgba(86,198,235,1)",
          "rgba(57,115,160,1)",
        ],
        [
          "rgba(87,165,177,1)",
          "rgba(243,228,199,1)",
          "rgba(238,165,125,1)",
          "rgba(218,95,90,1)",
          "rgba(104,21,39,1)",
        ],
        [
          "rgba(242,242,218,1)",
          "rgba(244,169,76,1)",
          "rgba(213,73,76,1)",
          "rgba(32,87,143,1)",
          "rgba(32,56,80,1)",
        ],
        [
          "rgba(190,216,217,1)",
          "rgba(129,157,158,1)",
          "rgba(84,99,102,1)",
          "rgba(239,244,220,1)",
          "rgba(237,105,92,1)",
        ],
      ],
      activeName: "6",
      textAlignList: [
        {
          label: "靠左",
          value: "left",
        },
        {
          label: "靠右",
          value: "right",
        },
        {
          label: "居中",
          value: "center",
        },
      ],
      sankeyOrientList: [
        {
          label: "从左往右",
          value: "horizontal",
        },
        {
          label: "从上往下",
          value: "vertical",
        },
      ],
      labelPositionList: [
        {
          label: "顶部",
          value: "top",
        },
        {
          label: "底部",
          value: "bottom",
        },
        {
          label: "左边",
          value: "left",
        },
        {
          label: "右边",
          value: "right",
        },
        {
          label: "内部居中",
          value: "inside",
        },
        {
          label: "内部顶部",
          value: "insideTop",
        },
        {
          label: "内部底部",
          value: "insideBottom",
        },
        {
          label: "内部左边",
          value: "insideLeft",
        },
        {
          label: "内部右边",
          value: "insideRight ",
        },
        {
          label: "内部左上",
          value: "insideTopLeft ",
        },
        {
          label: "内部右上",
          value: "insideTopRight",
        },
        {
          label: "内部左下",
          value: "insideBottomLeft",
        },
        {
          label: "内部右下",
          value: "insideBottomRight",
        },
      ],
      orientList: [
        {
          label: "水平",
          value: "horizontal",
        },
        {
          label: "垂直",
          value: "vertical",
        },
      ],
      bgImgList: ["myres", "myclust", "myasset", "mysercvice", "myapp"],
      iconList: [
        "el-icon-ice-cream-round",
        "el-icon-ice-cream-square",
        "el-icon-lollipop",
        "el-icon-potato-strips",
        "el-icon-milk-tea",
        "el-icon-ice-drink",
        "el-icon-ice-tea",
        "el-icon-coffee",
        "el-icon-orange",
        "el-icon-pear",
        "el-icon-cherry",
        "el-icon-watermelon",
        "el-icon-grape",
        "el-icon-refrigerator",
        "el-icon-goblet-square-full",
        "el-icon-goblet-square",
        "el-icon-goblet-full",
        "el-icon-goblet",
        "el-icon-cold-drink",
        "el-icon-coffee-cup",
        "el-icon-water-cup",
        "el-icon-hot-water",
        "el-icon-ice-cream",
        "el-icon-dessert",
        "el-icon-sugar",
        "el-icon-tableware",
        "el-icon-burger",
        "el-icon-knife-fork",
        "el-icon-fork-spoon",
        "el-icon-chicken",
        "el-icon-food",
        "el-icon-dish-1",
        "el-icon-dish",
        "el-icon-moon-night",
        "el-icon-moon",
        "el-icon-cloudy-and-sunny",
        "el-icon-partly-cloudy",
        "el-icon-cloudy",
        "el-icon-sunny",
        "el-icon-sunset",
        "el-icon-sunrise-1",
        "el-icon-sunrise",
        "el-icon-heavy-rain",
        "el-icon-lightning",
        "el-icon-light-rain",
        "el-icon-wind-power",
        "el-icon-baseball",
        "el-icon-soccer",
        "el-icon-football",
        "el-icon-basketball",
        "el-icon-ship",
        "el-icon-truck",
        "el-icon-bicycle",
        "el-icon-mobile-phone",
        "el-icon-service",
        "el-icon-key",
        "el-icon-unlock",
        "el-icon-lock",
        "el-icon-watch",
        "el-icon-watch-1",
        "el-icon-timer",
        "el-icon-alarm-clock",
        "el-icon-map-location",
        "el-icon-delete-location",
        "el-icon-add-location",
        "el-icon-location-information",
        "el-icon-location-outline",
        "el-icon-location",
        "el-icon-place",
        "el-icon-discover",
        "el-icon-first-aid-kit",
        "el-icon-trophy-1",
        "el-icon-trophy",
        "el-icon-medal",
        "el-icon-medal-1",
        "el-icon-stopwatch",
        "el-icon-mic",
        "el-icon-copy-document",
        "el-icon-full-screen",
        "el-icon-switch-button",
        "el-icon-aim",
        "el-icon-crop",
        "el-icon-odometer",
        "el-icon-time",
        "el-icon-bangzhu",
        "el-icon-close-notification",
        "el-icon-microphone",
        "el-icon-turn-off-microphone",
        "el-icon-position",
        "el-icon-postcard",
        "el-icon-message",
        "el-icon-chat-line-square",
        "el-icon-chat-dot-square",
        "el-icon-chat-dot-round",
        "el-icon-chat-square",
        "el-icon-chat-line-round",
        "el-icon-chat-round",
        "el-icon-set-up",
        "el-icon-turn-off",
        "el-icon-open",
        "el-icon-connection",
        "el-icon-link",
        "el-icon-cpu",
        "el-icon-thumb",
        "el-icon-female",
        "el-icon-male",
        "el-icon-guide",
        "el-icon-news",
        "el-icon-price-tag",
        "el-icon-discount",
        "el-icon-wallet",
        "el-icon-coin",
        "el-icon-money",
        "el-icon-bank-card",
        "el-icon-box",
        "el-icon-present",
        "el-icon-sell",
        "el-icon-sold-out",
        "el-icon-shopping-bag-2",
        "el-icon-shopping-bag-1",
        "el-icon-shopping-cart-2",
        "el-icon-shopping-cart-1",
        "el-icon-shopping-cart-full",
        "el-icon-smoking",
        "el-icon-no-smoking",
        "el-icon-house",
        "el-icon-table-lamp",
        "el-icon-school",
        "el-icon-office-building",
        "el-icon-toilet-paper",
        "el-icon-notebook-2",
        "el-icon-notebook-1",
        "el-icon-files",
        "el-icon-collection",
        "el-icon-receiving",
        "el-icon-suitcase-1",
        "el-icon-suitcase",
        "el-icon-film",
        "el-icon-collection-tag",
        "el-icon-data-analysis",
        "el-icon-pie-chart",
        "el-icon-data-board",
        "el-icon-data-line",
        "el-icon-reading",
        "el-icon-magic-stick",
        "el-icon-coordinate",
        "el-icon-mouse",
        "el-icon-brush",
        "el-icon-headset",
        "el-icon-umbrella",
        "el-icon-scissors",
        "el-icon-mobile",
        "el-icon-attract",
        "el-icon-monitor",
        "el-icon-search",
        "el-icon-takeaway-box",
        "el-icon-paperclip",
        "el-icon-printer",
        "el-icon-document-add",
        "el-icon-document",
        "el-icon-document-checked",
        "el-icon-document-copy",
        "el-icon-document-delete",
        "el-icon-document-remove",
        "el-icon-tickets",
        "el-icon-folder-checked",
        "el-icon-folder-delete",
        "el-icon-folder-remove",
        "el-icon-folder-add",
        "el-icon-folder-opened",
        "el-icon-folder",
        "el-icon-edit-outline",
        "el-icon-edit",
        "el-icon-date",
        "el-icon-c-scale-to-original",
        "el-icon-view",
        "el-icon-loading",
        "el-icon-rank",
        "el-icon-sort-down",
        "el-icon-sort-up",
        "el-icon-sort",
        "el-icon-finished",
        "el-icon-refresh-left",
        "el-icon-refresh-right",
        "el-icon-refresh",
        "el-icon-video-play",
        "el-icon-video-pause",
        "el-icon-d-arrow-right",
        "el-icon-d-arrow-left",
        "el-icon-arrow-up",
        "el-icon-arrow-down",
        "el-icon-arrow-right",
        "el-icon-arrow-left",
        "el-icon-top-right",
        "el-icon-top-left",
        "el-icon-top",
        "el-icon-bottom",
        "el-icon-right",
        "el-icon-back",
        "el-icon-bottom-right",
        "el-icon-bottom-left",
        "el-icon-caret-top",
        "el-icon-caret-bottom",
        "el-icon-caret-right",
        "el-icon-caret-left",
        "el-icon-d-caret",
        "el-icon-share",
        "el-icon-menu",
        "el-icon-s-grid",
        "el-icon-s-check",
        "el-icon-s-data",
        "el-icon-s-opportunity",
        "el-icon-s-custom",
        "el-icon-s-claim",
        "el-icon-s-finance",
        "el-icon-s-comment",
        "el-icon-s-flag",
        "el-icon-s-marketing",
        "el-icon-s-shop",
        "el-icon-s-open",
        "el-icon-s-management",
        "el-icon-s-ticket",
        "el-icon-s-release",
        "el-icon-s-home",
        "el-icon-s-promotion",
        "el-icon-s-operation",
        "el-icon-s-unfold",
        "el-icon-s-fold",
        "el-icon-s-platform",
        "el-icon-s-order",
        "el-icon-s-cooperation",
        "el-icon-bell",
        "el-icon-message-solid",
        "el-icon-video-camera",
        "el-icon-video-camera-solid",
        "el-icon-camera",
        "el-icon-camera-solid",
        "el-icon-download",
        "el-icon-upload2",
        "el-icon-upload",
        "el-icon-picture-outline-round",
        "el-icon-picture-outline",
        "el-icon-picture",
        "el-icon-close",
        "el-icon-check",
        "el-icon-plus",
        "el-icon-minus",
        "el-icon-help",
        "el-icon-s-help",
        "el-icon-circle-close",
        "el-icon-circle-check",
        "el-icon-circle-plus-outline",
        "el-icon-remove-outline",
        "el-icon-zoom-out",
        "el-icon-zoom-in",
        "el-icon-error",
        "el-icon-success",
        "el-icon-circle-plus",
        "el-icon-remove",
        "el-icon-info",
        "el-icon-question",
        "el-icon-warning-outline",
        "el-icon-warning",
        "el-icon-goods",
        "el-icon-s-goods",
        "el-icon-star-off",
        "el-icon-star-on",
        "el-icon-more-outline",
        "el-icon-more",
        "el-icon-phone-outline",
        "el-icon-phone",
        "el-icon-user",
        "el-icon-user-solid",
        "el-icon-setting",
        "el-icon-s-tools",
        "el-icon-delete",
        "el-icon-delete-solid",
      ],
      roseTypeList: [
        {
          label: "角度不同半径相同",
          value: false,
        },
        {
          label: "角度不同半径不同",
          value: "radius",
        },
        {
          label: "角度相同半径不同",
          value: "area",
        },
      ],
      dataSort: [
        {
          label: "降序",
          value: "descending",
        },
        {
          label: "升序",
          value: "ascending",
        },
        {
          label: "原始顺序",
          value: "none",
        },
      ],
      dataFormats: [
        {
          label: "百分比",
          value: "percent",
        },
        {
          label: "数值",
          value: "number",
        },
      ],
      shapeList: [
        {
          label: "圆形",
          value: "circle",
        },
        {
          label: "圆角矩形",
          value: "rect",
        },
        {
          label: "三角形",
          value: "triangle",
        },
        {
          label: "菱形",
          value: "diamond",
        },
        {
          label: "水滴形",
          value: "pin",
        },
        {
          label: "全覆盖",
          value: "container",
        },
        {
          label: "箭头形",
          value: "arrow",
        },
      ],
      legendTop: [
        {
          label: "居上",
          value: "top",
        },
        {
          label: "居中",
          value: "middle",
        },
        {
          label: "居下",
          value: "bottom",
        },
      ],
      legendLeft: [
        {
          label: "居左",
          value: "left",
        },
        {
          label: "居中",
          value: "center",
        },
        {
          label: "居右",
          value: "right",
        },
      ],
      lineTypeList: [
        {
          label: "普通",
          value: false,
        },
        {
          label: "平滑",
          value: "smooth",
        },
        {
          label: "梯级",
          value: "step",
        },
      ],
      styleForm: {},
      cascaderValue: [],
      nameUnit: false,
      yAxisShow: true,
      yAxisLength: 1,
      editorValue: "console.log(123)",
      // seriesTypeListLength: 0
    };
  },
  methods: {
    addTab() {
      if (!Array.isArray(this.colData.api)) {
        this.colData.api = this.colData.api || {};

        this.colData.api.label = this.colData.mainTitle;
        let apiList = [this.colData.api];
        apiList.push({ label: `标签${apiList.length + 1}` });
        this.colData.api = apiList;
      } else {
        this.colData.api.push({ label: `标签${this.colData.api.length + 1}` });
      }
    },
    removeTab(name) {
      if (!Array.isArray(this.colData.api) || this.colData.api.length === 1) {
        this.$message("至少要保留一个数据源！");
      } else {
        this.colData.api.splice(name * 1, 1);
        this.$emit( "change-api", this.colData.api);
      }
    },
    apiTabChange(tab) {
      this.tabIndex = tab.$attrs.tabIndex;
    },
    changeColorList(value) {
      this.styleForm.color = [...this.colorList[value]];
      this.changeForm();
    },
    changeUrl() {
      this.colData.url = this.cascaderValue[this.cascaderValue.length - 1];
      this.changeForm();
    },
    changeHollow(value) {
      if (value) {
        this.styleForm.series[0].radius[0] =
          parseFloat(this.styleForm.series[0].radius[1]) * 0.75 + "%";
      } else {
        this.styleForm.series[0].radius[0] = "0%";
      }
      this.changeForm();
    },
    changeYAxisIndex(index) {
      this.changeForm();
    },
    // 修改Y轴数量
    changeYAxis(value) {
      // 减少Y轴数量
      if (value === 1 && this.styleForm.yAxis.length === 2) {
        if (this.styleForm.seriesYAxisIndexList.indexOf(1) > -1) {
          this.$alert("请先移除Y2轴上曲线", "", {
            confirmButtonText: "确定",
          });

          this.$nextTick(() => {
            this.yAxisLength = 2;
          });
          return false;
        }
        this.styleForm.yAxis.pop();
      }
      // 增加Y轴数量
      else if (value === 2) {
        this.styleForm.yAxis[1] = JSON.parse(
          JSON.stringify(this.styleForm.yAxis[0])
        );
      }

      this.styleForm["yAxis"] = JSON.parse(
        JSON.stringify(this.styleForm.yAxis)
      );
      this.changeForm();
    },
    changeForm() {
      this.$emit( "changeForm", this.styleForm);
    },
    changeSize() {
      this.$emit( "changeSize");
      this.changeType();
    },
    changeType() {
      this.$emit( "changeType", this.colData);
    },
    changeColor(color) {
      this.changeForm();
    },
    delColor(i) {
      this.styleForm.color.splice(i, 1);
      if (this.styleForm.color.length === 0) {
        this.addColor("rgba(37,204,167,1)");
      }
      this.changeForm();
    },
    addColor(color) {
      this.styleForm.color.push(color);
      this.changeForm();
    },
    leftCol(i) {
      [this.styleForm.tableColData[i], this.styleForm.tableColData[i - 1]] = [
        this.styleForm.tableColData[i - 1],
        this.styleForm.tableColData[i],
      ];
      //为了触发tableColData更新，所以再$set一次，下同
      this.styleForm.tableColData[i] = this.styleForm.tableColData[i];
      this.tableIndex--;
      this.changeForm();
    },
    rightCol(i) {
      [this.styleForm.tableColData[i], this.styleForm.tableColData[i + 1]] = [
        this.styleForm.tableColData[i + 1],
        this.styleForm.tableColData[i],
      ];
      this.styleForm.tableColData[i] = this.styleForm.tableColData[i];
      this.tableIndex++;
      this.changeForm();
    },
    getApiList() {
      let data = {};
      // let type = compTypeList
      //将保存的componentName转换成compTypeCode
      data.dsName = this.dsName || null;
      data.params = {
        compTypeCode: this.colData.componentName.substr(
          this.colData.componentName.indexOf("-") + 1
        ), //{ compTypeCode: type.find(item => item.compTypeCode === this.colData.componentName).compTypeCode }
      };
      data.params.dsName = this.dsName || null;
      data.pageInfo = this.pageInfo;
      nt.doRequest({
        method: "post",
        uri: "/paas/chart-layout/v1/compdsconfig/getCompDSConfigList",
        data,
        onSuccess: (resp) => {
          this.apiList = resp.data.content.list;
          this.pageInfo = resp.data.content.pageInfo;
        },
      });
    },
    selectApi(value, index, item) {
      let val;
      if (index !== undefined) {
        value.label = item.label;
        this.colData.api[index] = value;
        val = this.colData.api;
      } else {
        val = value;
      }

      this.$emit( "change-api", val);
    },
    change() {
      this.$forceUpdate();
    },
    labelChange(value, index) {
      this.colData.api[index].label = value;
      this.$emit( "change-api", this.colData.api);
    },
    sizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize;
      this.getApiList();
    },
    currentPageChange(currentPage) {
      this.pageInfo.currentPage = currentPage;
      this.getApiList();
    },
    selectRow({ row, rowIndex }) {
      if (!this.colData.api) {
        return;
      }

      if (Array.isArray(this.colData.api)) {
        if (row.dsName === this.colData.api[this.tabIndex].dsName) {
          return "select-row";
        }
      } else {
        if (row.dsName === this.colData.api.dsName) {
          return "select-row";
        }
      }
    },
    async showCode(item) {
      if (!item) return;
      await this.$nextTick();
      if (item.name === "mixin" && !this.monacoEditor) {
        this.monacoEditor = monaco.editor.create(this.$refs.container, {
          value: this.editorValue,
          // value: "{}",
          language: "javascript",
        });
      }
    },
  },
  watch: {
    "colData.componentData.tableColData": function () {
      this.styleForm.tableColData = this.colData.componentData.tableColData;
    },
    "colData.componentData.tooltipList": function () {
      this.styleForm.tooltipList = this.colData.componentData.tooltipList;
    },
    "colData.componentData.seriesTypeList": function () {
      this.styleForm["seriesTypeList"] = JSON.parse(
        JSON.stringify(this.colData.componentData.seriesTypeList)
      );
    },
    "colData.componentData.seriesYAxisIndexList": function () {
      this.styleForm["seriesYAxisIndexList"] = JSON.parse(
        JSON.stringify(this.colData.componentData.seriesYAxisIndexList)
      );
    },
    "colData.componentData.seriesStackList": function () {
      this.styleForm["seriesStackList"] = JSON.parse(
        JSON.stringify(this.colData.componentData.seriesStackList)
      );
    },
    "colData.componentData.yAxis": function () {
      this.styleForm["yAxis"] = JSON.parse(
        JSON.stringify(this.colData.componentData.yAxis)
      );
      this.yAxisLength = Array.isArray(this.styleForm.yAxis)
        ? this.styleForm.yAxis.length
        : 1;
    },
    nameUnit: function (val) {
      if (this.colData.componentName === "chart-line") {
        if (!this.styleForm.yAxis) {
          return;
        }

        if (Array.isArray(this.styleForm.yAxis)) {
          this.styleForm.yAxis[0].nameUnit = val;
          if (this.styleForm.yAxis[1]) {
            this.styleForm.yAxis[1].nameUnit = val;
          }
        } else {
          this.styleForm.yAxis.nameUnit = val;
        }
      } else {
        //柱形图单位
        this.styleForm.nameUnit = val;
      }

      this.changeForm();
    },
    yAxisShow: function (val) {
      if (!this.styleForm.yAxis) {
        return;
      }
      if (Array.isArray(this.styleForm.yAxis)) {
        this.styleForm.yAxis[0].show = val;
        if (this.styleForm.yAxis[1]) {
          this.styleForm.yAxis[1].show = val;
        }
      } else {
        this.styleForm.yAxis.show = val;
      }
      this.changeForm();
    },
    "colData.componentData.series.0.label": function () {
      this.styleForm.series[0]["label"] = JSON.parse(
        JSON.stringify(this.colData.componentData.series[0].label)
      );
    },
  },
  computed: {
    yAxisMaxLength() {
      return this.styleForm.seriesTypeList
        ? this.styleForm.seriesTypeList.length > 2
          ? 2
          : this.styleForm.seriesTypeList.length || 1
        : 1;
    },
  },
  created() {
    this.getApiList();
    if (JSON.stringify(this.colData.componentData) !== "{}") {
      if (!this.colData.componentData.seriesTypeList) {
        // this.componentData.seriesTypeList= data.valueList.map(item=>false)
      }

      this.styleForm = JSON.parse(JSON.stringify(this.colData.componentData));
      this.styleForm.initHeight = this.rowData.initHeight;
      this.styleForm.align = this.rowData.align;
      this.styleForm.nameUnit = this.styleForm.nameUnit || false;
      if (this.styleForm.yAxis) {
        this.nameUnit =
          this.styleForm.yAxis.nameUnit ||
          (this.styleForm.yAxis[0] ? this.styleForm.yAxis[0].nameUnit : false);
      }
    }
    this.yAxisLength = Array.isArray(this.styleForm.yAxis)
      ? this.styleForm.yAxis.length
      : 1;

    if (!this.styleForm.isOverlap) {
      this.styleForm.isOverlap = false;
    }
    let type = this.colData.componentName;
    if (type.indexOf("chart") > -1) {
      this.showTab = true;
    }
    if (type === "chart-liquid") {
      this.showTab = false;
    }
    const addRotate = () => {
      if (this.styleForm.xRotate === undefined) {
        this.styleForm.xRotate = 0;
      }
      if (this.styleForm.yRotate === undefined) {
        this.styleForm.yRotate = 0;
      }
    };
    switch (this.colData.componentName) {
      case "chart-line":
        if (this.styleForm.series[0].connectNulls === undefined) {
          this.styleForm.series[0].connectNulls = true;
        }
        if (this.styleForm.yAxis[0].autoMin === undefined) {
          this.styleForm.yAxis[0].autoMin = false;
        }
        if (this.styleForm.splitInt === undefined) {
          this.styleForm.splitInt = false;
        }
        addRotate();
        break;
      case "chart-bar":
        if (this.styleForm.gradient === undefined) {
          this.styleForm.gradient = false;
        }
        if (this.styleForm.gradientDire === undefined) {
          this.styleForm.gradientDire = false;
        }
        if (this.styleForm.isReverse === undefined) {
          this.styleForm.isReverse = false;
        }
        if (this.styleForm.series[0].barGap === undefined) {
          this.styleForm.series[0].barGap = 0.3;
        }
        if (this.styleForm.splitInt === undefined) {
          this.styleForm.splitInt = false;
        }

        if (!Array.isArray(this.styleForm.series[0].label)) {
          this.styleForm.series[0].label = [this.styleForm.series[0].label];
        }
        addRotate();
        break;
      case "chart-heatmap":
        addRotate();
        break;
      case "chart-pie":
        this.chartStyleName = "pie";
        break;
      case "chart-gauge":
        this.chartStyleName = "five";
        break;
      case "chart-radar":
        this.chartStyleName = "legend";
        break;
      case "chart-funnel":
        this.chartStyleName = "funnel";
        break;
      case "progress-progress":
        this.chartStyleName = "progress";
        break;
      default:
        break;
    }
  },
  mounted() {
    let type = this.colData.componentName;
    if (type.indexOf("chart") > -1) {
      this.showCode();
    }
  },
  emits: [
    "moveRow",
    "removeRow",
    "change-api",
    "changeForm",
    "changeType",
    "changeSize",
  ],
};
</script>

<style>
.colorBox {
  padding: 0;
}
.com-style-box .select-row {
  font-weight: bolder;
  font-size: 16px;
}
</style>

<style scoped>
#container {
  width: 100%;
  min-height: 500px;
}

.el-tab-pane:focus {
  outline: none;
}

.el-popover__reference {
  display: inline-block;
}

.operation-btn {
  cursor: pointer;
  margin-right: 4px;
  color: #419eff;
}

.operation-btn:hover {
  color: #66b1ff;
}

div.bgOptionBox {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.colorIcon {
  margin: 0 0 0 5px;
  line-height: 36px;
  cursor: pointer;
}

.colorButton {
  color: #fff;
  position: relative;
}

.colorButton:hover .del-btn {
  display: block;
}

.colorButton .del-btn {
  display: none;
  position: absolute;
  z-index: 10;
  top: 20px;
  left: calc(25% - 5px);
  color: #333;
}

.y-axis-index {
  width: 60px;
}
</style>
